<template>
  <div v-loading="loading">
    <div v-show="kind==='list'">
      <order-list @goView="goView" @goRepayment="goRepayment"></order-list>
    </div>
    <div v-show="kind==='view'">
      <order-view :order="currentOrder" @goRepayment="goRepayment" @goOrderList="goOrderList"></order-view>
    </div>
    <div v-show="kind==='repayment'">
      <order-repayment :order="currentOrder" @doRepayment="doRepayment" @goOrderList="goOrderList"></order-repayment>
    </div>
  </div>
</template>

<script>
  import OrderList from './subs/OrderList.vue';
  import OrderView from './subs/OrderView.vue';
  import OrderRepayment from './subs/OrderRepayment.vue';
  import * as actionTypes from '../../constants/action-types';
  export default {
    name: 'Order',
    components:{
      OrderList,
      OrderView,
      OrderRepayment,
    },
    data() {
      return {
        loading: false,
        kind: 'list', // list, view, repayment

        currentOrder:null,
      }
    },
    computed:{

    },
    created(){
      this.fetchData();
    },
    methods:{
      fetchData(){
        let me =this;
        me.loading=true;
        this.$store.dispatch(actionTypes.GET_ORDERLIST).then(()=>{
          me.loading=false
        }).catch(() => {
          me.loading=false
        })
      },
      goView(row){
        this.currentOrder = row;
        this.kind='view'
      },
      goOrderList(){
        this.kind='list';
      },
      goRepayment(row){
        if(row){
          this.currentOrder = row;
        }
        this.kind='repayment';
      },
      doRepayment(repaymentInfo){

      },
    }
  }
</script>

<style lang="stylus" scoped>
</style>
